<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- <input type="text" @input="handleInput"> -->


        <!-- v-model:双向数据绑定，将input框中的value值和mytext状态绑定在一起，value值改变会实时同步mytext -->
        <input type="text" v-model="mytext">

        <button @click="handleClick()">add</button>

        <ul>
            <li v-for="(data,index) in datalist">
                {{ data }}
                <button @click="handleDel(index)">删除</button>
            </li>
        </ul>
    </div>

    <script>
        new Vue ({
            el:"#box",
            data: {
                mytext:"",
                datalist:[]
            },
           methods:{
               handleClick(){
                   console.log('add',this.mytext)
                   this.datalist.push(this.mytext)
                //点击按钮之后重置input,将mytex获取为空
                this.mytext=""
               }, 
               handleDel(myindex){
                   console.log('del',myindex)
                   //获取列表下标
                   this.datalist.splice(myindex, 1)
               }
            //    handleInput(evt){
            //        console.log('input', evt.target.value)
            //        this.mytext = evt.target.value
            //    }
           }
        })
    </script>
</body>
</html>